import { React, useEffect, useState } from 'react';
import './scoreorder.css';
import '../../index.css';
import axios from 'axios';
import { Pagination } from 'antd';
import InterIP from '../../IP/IP'
import { useNavigate } from 'react-router-dom';
export default function Scoreorder() {
  const [allMainData, setMainData] = useState([]);
  const [twig, setTwig] = useState();
  const navigate = useNavigate();
  useEffect(() => {
    var userID = document.cookie.slice(5);
    let IP = InterIP().props.children;
    axios.post("http://" + IP + ":3000/user/selIndent/integral", {
      user_id: userID,
      page: 1,
    }).then((res) => {
      setTwig((twig) => twig = res.data.rows_length)
      var bigArr = res.data.rows;
      axios.post('http://localhost:3000/index/selStore', {}).then((res) => {
        let arr = [];
        bigArr.forEach((v, k) => {
          arr[k] = {
            store_id: '',
            indent_id: [],
            store_name: v.store_name,
            boss_name: '',
            boss_phone: '',
            cart_totalPrice: 0,
            product: [],
            order_time: v.order_time,
            order_status: v.order_status,
            total_price: 0,
            address_id: '',
          }
        });

        for (let i = 0; i < arr.length; i++) {
          for (let j = i + 1; j < arr.length; j++) {
            if (arr[i].store_name === arr[j].store_name && arr[i].order_time === arr[j].order_time) {
              arr.splice(j, 1);
              j--;
            }
          }
        }
        res.data.forEach((value) => {
          arr.forEach((v) => {
            if (v.store_name === value.store_name) {
              v.store_id = value.store_id;
              v.boss_name = value.boss_name;
              v.boss_phone = value.boss_phone;
            }
          })
        })

        arr.forEach((v) => {
          bigArr.forEach((val) => {
            if (v.store_name === val.store_name && v.order_time === val.order_time) {
              let value = JSON.parse(val.product)
              let smallArr = {
                product_name: value.product_name,
                product_number: value.product_number,
                product_specification: value.product_specification,
                product_price: value.product_price,
                product_img: value.product_img,
                buy_number: value.buy_number,
                product_id: value.product_id,
                boss_name: v.boss_name,
                boss_phone: v.boss_phone,
              }
              v.total_price = parseFloat(value.product_price) * parseFloat(value.buy_number);
              v.product.push(smallArr);
              v.indent_id.push(val.indent_id)
              v.address_id = val.address_id;
            }
          })
        })
        setMainData((allMainData) => allMainData = arr)
      })
    })

  }, []);


  // 请求第几页
  function paging(page) {
    var userID = document.cookie.slice(5);
    let IP = InterIP().props.children;
    axios.post("http://" + IP + ":3000/user/selIndent/integral", {
      user_id: userID,
      page: page,
    }).then((res) => {
      setTwig((twig) => twig = res.data.rows_length)
      var bigArr = res.data.rows;
      axios.post('http://localhost:3000/index/selStore', {}).then((res) => {
        let arr = [];
        bigArr.forEach((v, k) => {
          arr[k] = {
            store_id: '',
            indent_id: [],
            store_name: v.store_name,
            boss_name: '',
            boss_phone: '',
            cart_totalPrice: 0,
            product: [],
            order_time: v.order_time,
            order_status: v.order_status,
            total_price: 0,
            address_id: '',
          }
        });

        for (let i = 0; i < arr.length; i++) {
          for (let j = i + 1; j < arr.length; j++) {
            if (arr[i].store_name === arr[j].store_name && arr[i].order_time === arr[j].order_time) {
              arr.splice(j, 1);
              j--;
            }
          }
        }
        res.data.forEach((value) => {
          arr.forEach((v) => {
            if (v.store_name === value.store_name) {
              v.store_id = value.store_id;
              v.boss_name = value.boss_name;
              v.boss_phone = value.boss_phone;
            }
          })
        })

        arr.forEach((v) => {
          bigArr.forEach((val) => {
            if (v.store_name === val.store_name && v.order_time === val.order_time) {
              let value = JSON.parse(val.product)
              let smallArr = {
                product_name: value.product_name,
                product_number: value.product_number,
                product_specification: value.product_specification,
                product_price: value.product_price,
                product_img: value.product_img,
                buy_number: value.buy_number,
                product_id: value.product_id,
                boss_name: v.boss_name,
                boss_phone: v.boss_phone,
              }
              v.total_price = parseFloat(value.product_price) * parseFloat(value.buy_number);
              v.product.push(smallArr);
              v.indent_id.push(val.indent_id)
              v.address_id = val.address_id;
            }
          })
        })
        setMainData((allMainData) => allMainData = arr)
      })
    })
  }

  function allorder_look(data) {
    return () => {
      navigate("/home/person/orderdetails", {
        state: {
          data: data,
        }
      })
    }
  }

  function shanchu(data) {
    let IP = InterIP().props.children;
    return () => {
      axios.post("http://" + IP + ":3000/user/delIndent/integral", {
        indent_id: data.store_id,
      })
        .then((res) => {
          console.log(res);
        })
    }
  }
  return (
    <div id="myorder">
      <div className="myorder_top">积分订单</div>
      <div className="myorder_daohang">

      </div>
      <div>
        {allMainData.map((data, k) => {
          return (
            <div className="allorder_card" key={k}>
              <div className="allorder_card_top">
                <ul>
                  <li>订单号:<span>{data.indent_id}</span></li>
                  <li>下单日期:<span>{data.order_time}</span></li>
                  <li>{data.store_name}</li>
                  <li>订单状态:&nbsp;<span>{data.order_status}</span></li>
                </ul>
              </div>
              {allMainData[k].product.map((v, key) =>
                <div className="allorder_bottom" key={key}>
                  <div className="allorder_card_main">
                    <div className="allorder_card_main_left">
                      <div className="allorder_card_left">
                        <div className="allorder_card_img">
                          <img src={v.product_img} alt="" />
                        </div>
                      </div>

                      <div className="allorder_card_left">
                        <span>{v.product_number}</span>{v.product_specification}
                      </div>

                      <div className="allorder_card_left">
                        <span>&nbsp;&nbsp;x&nbsp;&nbsp;</span>
                        <span>{v.buy_number}</span>
                      </div>
                    </div>
                  </div>


                  <div className="lfy_allorder_total">
                    <span>积分:{data.total_price}</span>
                  </div>
                  <div className="allorder_card_right2">
                    <button className='score_button1' onClick={allorder_look(data)}>查看详情</button>
                    <button className='score_button2' onClick={shanchu(data)}>删除订单</button>
                  </div>
                </div>
              )}
            </div>
          )
        })}
        <Pagination className="allorder_page" onChange={paging} total={twig} pageSize={6}></Pagination>
      </div>

    </div >
  )
}